<script setup>

import {ref} from 'vue';

defineProps({
  curtainStyles: Array
});

const borderStyle = ref('');

const handleClick = (e) => {
   document.querySelectorAll('.img-card').forEach((card) => {
      card.style = '';
   });

   if (e.target.classList.contains('img-card')) {
      e.target.style = 'border: 2px solid gray;';
   }

   if(e.target.tagName === "IMG" && e.target.parentElement.classList.contains('img-card')){
      e.target.parentElement.style = 'border: 2px solid gray;';
   }
}

</script>

<template>
<div>
  <div class="choose-title">choose one</div>
  <div class="grid grid-cols-3 gap-6 p-6 image-container">
    <div v-for="(style, index) in curtainStyles" :key="index" class="text-center border p-4 rounded-lg shadow-lg img-card" @click="handleClick">
      <img :src="style.image" :alt="style.title" class="mx-auto mb-4 w-32 h-48 object-contain" @click="$emit('selected', style.title)" />
      <h3 class="font-bold text-lg">{{ style.title }}</h3>
      <p class="text-gray-600" v-html="style.description"></p>
    </div>
  </div>
</div>

</template>

<style scoped>

.choose-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
  text-align: center;
  margin-top: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

h3 {
  text-align: center;
}

img {
  width:190px;
  height: 244px;
  cursor: pointer;
}

.img-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:0.5rem;
}

.image-container div:nth-child(2) {
   border-right: 1px solid gray;
   border-left:1px solid gray;
   padding-left:20px;
  padding-right: 20px;
}

@media screen and (max-width: 600px) {

  .grid {
    display: flex;
    flex-direction: column;
  }

  .image-container div:nth-child(2) {
     border:none;
  }

}

</style>